<template>
  <div>
    <!-- 活动回访结果查询-->
    <TopFilter :list="topFilterList" :cols="4" :collapse="true" @filterChange="changeHandle" @onCollapse="collapseHandle"></TopFilter>
    <FilterTable ref="table" height="500px" :columns="columns" :fetchapi="fetchApi" :params="fetchParams" :datakey="'rows'" columnsRef="lxjczcl" :onColumnsChange="columns => (this.columns = columns)">
      <template slot="controls">
        <el-button size="small" type="primary" icon="el-icon-download">导出</el-button>
      </template>
    </FilterTable>

    <!--明细 问卷录入 -->
    <Drawer :visible.sync="questionnaire" title="回访信息录入" destroyOnClose :width="1300" :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <RemindInputs :remindData="questionnaireData" :buttonType="buttonType" @close="closeQuestionNaire"></RemindInputs>
    </Drawer>
  </div>
</template>

<script>
import { dictionary } from '@/utils/dictMixin';
import RemindInputs from '@/pages/customerRepair/customerCare/maintenanceRemind/remindInputs.vue'; // 问卷录入
import { getVisitResultQuery, getAllUser, getQuestionnaireList } from '@/api/customerRepair/activityVisit/resultEntry';
import { getDealerUser, searchBrand, searchSeries, searchModel, searchApAckAge } from '@/api/customerRepair/customerComplaint/customerComplaintReception';
import { searchRoleByCodes } from '@/api/customerCare/visitAllocation/getVisitInfo';
import { searchRoleByCode } from '@/api/common/empSelect/index';
import dictCode from '@/utils/dictCode';
import { getBrand, getSeries, getModel, getRegion } from '@/api/customerRepair/customerCare/insuranceDueRemind';

export default {
  name: 'resultEntry_questionnaireEntry',
  components: {
    RemindInputs
  },
  mixins: [dictionary],
  data() {
    this.BaseTable = null;
    this.type = '';
    this.buttonType = '';
    this.resData = {};
    return {
      title: '回访信息录入',
      topFilterList: this.createTopFilterList(),
      visible: false,
      ownerSelect: true,
      questionnaire: false, // 问卷录入
      fetchApi: getVisitResultQuery,
      fetchParams: { xhrAbort: true },
      columns: this.createTableColumns(),
      questionnaireData: {} // 问卷录入数据
    };
  },
  created() {
    this.getChiefTechnician();
    this.getDcrcAdvisor();
    this.getAllUser();
    this.getQuestionnaireList();
  },
  mounted() {
    this.BaseTable = this.$refs.table.$refs.pageTable;
    this.getEmp();
    this.queryBrand();
    this.getBrandList();
    this.querySeries();
    this.queryModel();
    this.queryRegion();
  },
  methods: {
    // dcrc客服专员 跟踪员
    async getDcrcAdvisor() {
      let roleParm = {
        role: dictCode.CUSTOMER_SERVICE_SPECIALIST
      };
      const res = await searchRoleByCodes(roleParm);
      // console.log('客服专员', res);
      this.topFilterList.find(item => item.fieldName === 'trancer').itemList = res.data.map(x => ({ value: x.userId, text: x.employeeName }));
      // this.topFilterList[11].itemList = res.data.map(x =>({value:x.userId, text:x.employeeName}));
    },
    // 指定技师
    async getChiefTechnician() {
      // let roleParm = {
      //   role:dictCode.TECHNICIAN
      // };
      // const res = await searchRoleByCode(roleParm);
      // console.log('指定技师',res);
      // this.topFilterList[6].itemList = res.data.map(x =>({value:x.userId, text:x.employeeName}));
    },
    // 操作员、录入人
    async getAllUser() {
      const res = await getAllUser();
      // console.log('操作员、录入人', res);
      this.topFilterList.find(item => item.fieldName === 'inputer').itemList = res.data.map(x => ({ value: x.userId, text: x.employeeName }));
    },
    // 问卷名称下拉框
    async getQuestionnaireList() {
      const res = await getQuestionnaireList();
      // console.log('问卷名称', res);
      this.topFilterList.find(item => item.fieldName === 'questionnaireId').itemList = res.data.map(x => ({ value: x.QUESTIONNAIRE_ID, text: x.QUESTIONNAIRE_NAME }));
    },
    // 品牌
    async getBrandList() {
      const res = await searchBrand();
      this.topFilterList.find(item => item.fieldName === 'brand').itemList = res.data.map(x => ({ value: x.brandId, text: x.brandName }));
      // console.log('--品牌--',res.data);
    },
    // //车系
    // async getSeries(brandsid) {
    //   const res = await searchSeries(brandsid);
    //   this.topFilterList[1].itemList = res.data.map(x => ({ value: x.seriesId, text: x.seriesName }));
    // },
    // //车型
    // async getModel(brandsid, seriessid) {
    //   const res = await searchModel(brandsid, seriessid);
    //   this.topFilterList[2].itemList = res.data.map(x => ({ value: x.modelId, text: x.modelName }));
    // },
    // 品牌下拉框改变时
    changePinpSelect(id) {
      // this.clearFormItem(this.topFilterList[1]);
      // this.clearFormItem(this.topFilterList[2]);
      // if (!id) return;
      // //获取车系
      // this.getSeries(id);
    },
    // 车系下拉框改变时
    changeChexSelect(id) {
      // this.clearFormItem(this.topFilterList[2]);
      // if (!id) return;
      // //获取车型
      // this.getModel(this.topFilterList[0].initialValue, id);
    },
    // 清空下拉框表当控件的值和下拉列表
    clearFormItem(item) {
      item.initialValue = undefined;
      item.itemList = [];
    },
    createTableColumns() {
      return [
        {
          title: '操作',
          dataIndex: 'column-action',
          width: 60,
          fixed: 'left',
          render: props => {
            return (
              <div>
                <el-button size="mini" type="text" onClick={() => this.inputClick(props.row)}>
                  明细
                </el-button>
              </div>
            );
          }
        },
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: 'VIN',
          dataIndex: 'VIN',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '车牌号',
          dataIndex: 'LICENSE',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '工单号',
          dataIndex: 'RO_NO',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '开单日期',
          dataIndex: 'RO_CREATE_DATE',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input',
          dateFormat: 'yyyy-MM-dd HH:mm:ss'
        },
        {
          title: '出厂日期',
          dataIndex: 'PRODUCT_DATE',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input',
          dateFormat: 'yyyy-MM-dd HH:mm:ss'
        },
        {
          title: '销售日期',
          dataIndex: 'SALE_DATE',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input',
          dateFormat: 'yyyy-MM-dd HH:mm:ss'
        },
        {
          title: '是否本公司购车',
          dataIndex: 'IS_SE',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input',
          render: props => {
            return <span>{this.createDictText(props.row.IS_SE, '1004')}</span>;
          }
        },
        {
          title: '跟踪日期',
          dataIndex: 'TRACE_DATE',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input',
          dateFormat: 'yyyy-MM-dd HH:mm:ss'
        },
        {
          title: '跟踪员',
          dataIndex: 'TRANCER',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input',
          editable: false,
          editType: 'select',
          editItems: []
        },
        {
          title: '跟踪状态',
          dataIndex: 'TRACE_STATUS',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input',
          render: props => {
            return <span>{this.createDictText(props.row.TRACE_STATUS, '8058')}</span>;
          }
        },
        {
          title: '录入人',
          dataIndex: 'INPUTER',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input',
          editable: false,
          editType: 'select',
          editItems: []
        },
        {
          title: '录入日期',
          dataIndex: 'INPUT_DATE',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input',
          dateFormat: 'yyyy-MM-dd HH:mm:ss'
        },
        {
          title: '第一次跟踪日期',
          dataIndex: 'INPUT_DATE_F',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input',
          dateFormat: 'yyyy-MM-dd HH:mm:ss'
        },
        {
          title: '第二次跟踪日期',
          dataIndex: 'INPUT_DATE_S',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input',
          dateFormat: 'yyyy-MM-dd HH:mm:ss'
        },
        {
          title: '第三次跟踪日期',
          dataIndex: 'INPUT_DATE_T',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input',
          dateFormat: 'yyyy-MM-dd HH:mm:ss'
        },
        {
          title: '发动机号',
          dataIndex: 'ENGINE_NO',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '品牌',
          dataIndex: 'BRAND',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input',
          editable: false,
          editType: 'select',
          editItems: []
        },
        {
          title: '车系',
          dataIndex: 'SERIES',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input',
          editable: false,
          editType: 'select',
          editItems: []
        },
        {
          title: '车型',
          dataIndex: 'MODEL',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input',
          editable: false,
          editType: 'select',
          editItems: []
        },
        {
          title: '颜色',
          dataIndex: 'COLOR',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '车主',
          dataIndex: 'OWNER_NAME',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '车主编号',
          dataIndex: 'OWNER_NO',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '车主性质',
          dataIndex: 'OWNER_PROPERTY',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input',
          render: props => {
            return <span>{this.createDictText(props.row.OWNER_PROPERTY, '8011')}</span>;
          }
        },
        {
          title: '性别',
          dataIndex: 'SEX',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input',
          render: props => {
            return <span>{this.createDictText(props.row.SEX, '8012')}</span>;
          }
        },
        {
          title: '车主电话',
          dataIndex: 'PHONE',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '车主手机',
          dataIndex: 'MOBILE',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '车主地址',
          dataIndex: 'OWNER_ADDRESS',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '省份',
          dataIndex: 'PROVINCE',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input',
          editable: false,
          editType: 'select',
          editItems: []
        },
        {
          title: '城市',
          dataIndex: 'CITY',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input',
          editable: false,
          editType: 'select',
          editItems: []
        },
        {
          title: '区县',
          dataIndex: 'DISTRICT',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input',
          editable: false,
          editType: 'select',
          editItems: []
        },
        {
          title: '地址',
          dataIndex: 'ADDRESS',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: 'E-MAIL',
          dataIndex: 'E_MAIL',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '联系人',
          dataIndex: 'CONTACTOR_NAME',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
          // render: props => {
          //   return <span>{this.createDictText(props.row.CT_CODE, '8013')}</span>;
          // }
        },
        {
          title: '联系人电话',
          dataIndex: 'CONTACTOR_PHONE',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '联系人手机',
          dataIndex: 'CONTACTOR_MOBILE',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '送修人',
          dataIndex: 'DELIVERER',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
          // render: props => {
          //   return <span>{this.createDictText(props.row.CT_CODE, '8013')}</span>;
          // }
        },
        {
          title: '送修人性别',
          dataIndex: 'DELIVERER_SEX',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input',
          render: props => {
            return <span>{this.createDictText(props.row.DELIVERER_SEX, '8012')}</span>;
          }
        },
        {
          title: '送修人电话',
          dataIndex: 'DELIVERER_PHONE',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '送修人手机',
          dataIndex: 'DELIVERER_MOBILE',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '备注',
          dataIndex: 'REMARK',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '维修类型',
          dataIndex: 'REPAIR_TYPE',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '服务专员',
          dataIndex: 'SERVICE_MAN',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input',
          editType: 'select',
          editable: false,
          editItems: []
        },
        {
          title: '责任技师',
          dataIndex: 'CHIEF_TECHNICIAN',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input',
          editType: 'select',
          editable: false,
          editItems: []
        },
        {
          title: '维修技师',
          dataIndex: 'TECHNICIAN_LIST',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input',
          editType: 'select',
          editable: false,
          editItems: []
        },
        {
          title: '维修项目',
          dataIndex: 'LABOUR_NAME',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        }
        // {
        //   title: '问卷名称',
        //   dataIndex: 'QUESTIONNAIRE_NAME',
        //   width: 150,
        //   sorter: true,
        //   filter: true,
        //   filterType: 'input'
        //   // render: props => {
        //   //   return <span>{this.createDictText(props.row.CT_CODE, '8013')}</span>;
        //   // }
        // },
        // {
        //   title: '问题答案',
        //   dataIndex: 'QUESTIONNAIRE_ANSWER',
        //   width: 150,
        //   sorter: true,
        //   filter: true,
        //   filterType: 'input'
        //   // render: props => {
        //   //   return <span>{this.createDictText(props.row.CT_CODE, '8013')}</span>;
        //   // }
        // }
      ];
    },
    createTopFilterList() {
      return [
        {
          type: 'SELECT',
          label: '品牌',
          fieldName: 'brand',
          placeholder: '请选择品牌',
          itemList: []
          // change: val => {
          //   this.changePinpSelect(val);
          // }
        },
        // {
        //   type: 'SELECT',
        //   label: '车系',
        //   fieldName: 'series',
        //   placeholder: '请选择车系',
        //   itemList: [],
        //   change: val => {
        //     this.changeChexSelect(val);
        //   },
        // },
        // {
        //   type: 'SELECT',
        //   label: '车型',
        //   fieldName: 'model',
        //   placeholder: '请选择车型',
        //   itemList: []
        // },
        {
          type: 'INPUT',
          label: 'VIN',
          fieldName: 'vin',
          placeholder: '请输入VIN'
        },
        {
          type: 'INPUT',
          label: '车牌号',
          fieldName: 'license',
          placeholder: '请输入车牌号'
        },
        // {
        //   type: 'SELECT',
        //   label: '录入人',
        //   fieldName: 'inputer',
        //   placeholder: '请选择录入人',
        //   itemList: []
        // },
        // {
        //   type: 'SELECT',
        //   label: '服务专员',
        //   fieldName: 'serviceAdvisor',
        //   placeholder: '请选择服务专员',
        //   itemList: this.createDictList('8011')
        // },
        // {
        //   type: 'SELECT',
        //   label: '技师',
        //   fieldName: 'technician',
        //   placeholder: '请选择技师',
        //   itemList: []
        // },
        // {
        //   type: 'RANGE_DATE',
        //   label: '录入日期',
        //   style: { minWidth: '200px' },
        //   fieldName: 'inputBeginDate|inputEndDate',
        //   valueFormat: 'yyyy-MM-dd'
        // },
        // {
        //   type: 'RANGE_DATE',
        //   label: '出厂日期',
        //   style: { minWidth: '200px' },
        //   fieldName: 'productBeginDate|productEndDate',
        //   valueFormat: 'yyyy-MM-dd'
        // },
        // {
        //   type: 'RANGE_DATE',
        //   label: '开单日期',
        //   style: { minWidth: '200px' },
        //   fieldName: 'roCreateBeginDate|roCreateEndDate',
        //   valueFormat: 'yyyy-MM-dd'
        // },
        // {
        //   type: 'INPUT',
        //   label: 'VIN',
        //   fieldName: 'vin',
        //   placeholder: '请输入VIN'
        // },
        {
          type: 'SELECT',
          label: '跟踪员',
          fieldName: 'trancer',
          placeholder: '请选择跟踪员',
          itemList: []
        },
        {
          type: 'RANGE_DATE',
          label: '跟踪日期',
          style: { minWidth: '200px' },
          fieldName: 'traceBeginDate|traceEndDate',
          valueFormat: 'yyyy-MM-dd'
        },
        {
          type: 'SELECT',
          label: '跟踪状态',
          fieldName: 'traceStatus',
          placeholder: '请选择跟踪状态',
          itemList: this.createDictList('8058', [80581001, 80581002, 80581005])
        },
        {
          type: 'SELECT',
          label: '录入人',
          fieldName: 'inputer',
          placeholder: '请选择录入人',
          itemList: []
        },
        {
          type: 'RANGE_DATE',
          label: '录入日期',
          style: { minWidth: '200px' },
          fieldName: 'inputBeginDate|inputEndDate',
          valueFormat: 'yyyy-MM-dd'
        },
        {
          type: 'SELECT',
          label: '问卷名称',
          fieldName: 'questionnaireId',
          placeholder: '请选择问卷名称',
          itemList: [],
          rules: [{ required: true, message: '请选择问卷名称', trigger: 'change' }]
        },
        {
          type: 'CHECKBOX',
          label: '是否显示RW',
          fieldName: 'idShowRw',
          style: { minWidth: '50px' }
        },
        {
          type: 'RADIO',
          label: '',
          style: { minWidth: '300px' },
          fieldName: 'radioVal',
          itemList: [
            { value: '1', text: '同回访批次合并' },
            { value: '2', text: '同进厂日期同VIN同服务顾问合并' },
            { value: '3', text: '不合并' }
          ],
          initialValue: '1'
        }
      ];
    },
    add() {
      this.type = 'add';
      this.title = '新增车主信息';
      this.visible = true;
    },
    edit(val) {
      this.type = 'edit';
      this.title = '修改车主信息';
      this.visible = true;
      this.resData = val;
    },
    detail(val) {
      this.type = 'show';
      this.title = '车主信息明细';
      this.visible = true;
      this.resData = val;
    },
    saveDrawer() {},
    // 明细
    openQuestionaireEntry(val) {
      // console.log('行数据', val);
      this.type = 'add';
      this.title = '回访信息录入';
      this.visible = true;
    },
    // 明细 问卷录入
    inputClick(val) {
      // console.log('行数据', val);
      this.buttonType = 1;
      this.questionnaireData = val;
      this.questionnaire = true;
    },
    // 问卷录入close
    closeQuestionNaire(val) {
      this.questionnaire = val;
    },
    changeHandle(val) {
      this.fetchParams = Object.assign({}, val, { xhrAbort: false });
    },
    collapseHandle() {
      // this.$nextTick(() => {
      //   this.BaseTable.EXECUTE_RESET_HEIGHT();
      // });
    },
    // 选中事件
    onRowSelectChange(val) {
      if (val.length == 0) {
        this.ownerSelect = true;
      } else {
        this.ownerSelect = false;
        this.resData = val[0];
      }
    },
    closeHandler(val) {
      this.visible = val;
    },
    // 获取全部员工
    async getEmp() {
      const res = await getDealerUser(this.editComplaintId);
      let empList = res.data.map(x => ({ text: x.employeeName, value: x.userId + '' }));

      this.columns.find(item => item.dataIndex === 'TRANCER').editItems = empList; // 跟踪员
      this.columns.find(item => item.dataIndex === 'INPUTER').editItems = empList; // 录入人
      this.columns.find(item => item.dataIndex === 'SERVICE_MAN').editItems = empList; // 服务专员
      this.columns.find(item => item.dataIndex === 'CHIEF_TECHNICIAN').editItems = empList; // 责任技师
      this.columns.find(item => item.dataIndex === 'TECHNICIAN_LIST').editItems = empList; // 维修技师
    },
    // 查询所有品牌(供table使用)
    async queryBrand() {
      const res = await getBrand();
      this.columns.find(x => x.dataIndex === 'BRAND').editItems = res.data.map(x => ({ text: x.BRAND_NAME, value: x.BRAND_ID + '' }));
    },
    // 查询所有车系(供table使用)
    async querySeries() {
      const res = await getSeries();
      this.columns.find(x => x.dataIndex === 'SERIES').editItems = res.data.map(x => ({ text: x.SERIES_NAME, value: x.SERIES_ID + '' }));
    },
    // 查询所有车型(供table使用)
    async queryModel() {
      const res = await getModel();
      this.columns.find(x => x.dataIndex === 'MODEL').editItems = res.data.map(x => ({ text: x.MODEL_NAME, value: x.MODEL_ID + '' }));
    },
    // 查询省市(供table使用)
    async queryRegion() {
      const res = await getRegion();
      let list = res.data.map(x => ({ text: x.REGION_NAME, value: x.REGION_ID }));
      this.columns.find(x => x.dataIndex === 'PROVINCE').editItems = list;
      this.columns.find(x => x.dataIndex === 'CITY').editItems = list;
      this.columns.find(x => x.dataIndex === 'DISTRICT').editItems = list;
    }
  }
};
</script>

<style lang="less" scoped></style>
